<template>
<el-main>
    <div><z-header></z-header></div>
    <div class="containe">
        <!-- 第一行 获取服务支持开始 -->
        <div class="bg-style">
            <div class="middle hello">
                <h1>获取多会的服务支持</h1>
                <p v-for="item in list1" :key="item">{{item.text}}</p>
                <div class="active">
                    <el-col :span="3"><el-card class="btn1" shadow="hover">联系销售</el-card></el-col>
                    <el-col :span="3"><el-card class="btn2" shadow="hover">立即试用</el-card></el-col>
                </div>
            </div>
        </div>
        <!-- 第二行 预约(about)产品演示开始 -->
        <div class="er">
            <div class="middle about">
                <h2>预约产品演示</h2>
                <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                    <el-form-item v-for="item in input" :key="item" :label="item.label">
                        <el-input :model="item.formLabelAlign"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="padding: 12px 487px; font-size: 18px;" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- 第三行 联系(contact)方式 -->
        <div class="san">
            <div class="bg-style">
                <div class="middle contact">
                    <h2>联系方式</h2>
                    <router-link to="/"><span class="bt">在线咨询</span></router-link><p>或致电</p><strong>021-80370533</strong>
                    <p class="p">周一至周五 10:00 至 19:00</p>
                </div>
            </div>
        </div>
    </div>
    <div><z-footer></z-footer></div>
</el-main>
</template>

<script>
import zHeader from '@/views/index/components/header.vue'
import zFooter from '@/views/index/components/footer.vue'
export default {
  components: { zHeader, zFooter },

  data () {
    return {
      list1: [
        { text: '有兴趣了解更多关于多会产品的信息，或是遇到了活动管理的挑战，我们的活动专家愿意帮助您。' }
      ],

      input: [
        { label: '主办方名称' },
        { label: '姓名' },
        { label: '联系电话' },
        { label: '微信号' }
      ],

      labelPosition: 'top',
      formLabelAlign: {
        fullname: '',
        name: '',
        phone: '',
        number: ''
      }
    }
  }
}
</script>

<style>
@import "~@/assets/css/help.css";
@import "~@/assets/css/template.css";
@import "~@/assets/css/public.css";
</style>
